<template>
	<view class="">
	<!-- :style="{height:height + 'rpx'}"  :id="`row_${item.id}`"-->
	
	<view class="list_box"
		:style="{height:heightList && Math.max(...heightList) != 0 ? Math.max(...heightList) + 'rpx' :'300rpx'}">
		
		<view class="row" v-for='(item,index) in allList' :key='index' @click="onDetail(item)" :id="`row_${item.id}`"
		
			:style='{top:item.style ? item.style.top : "1000px",left:item.style ? item.style.left : "1000px"}'>
			
			<view class="top_box">
				<image :src="type == 'decorationMoneyExchange' ? item.goods.cover : item.cover" mode="scaleToFill" style="border-radius: 10px 10px 0px 0px;">
				</image>
			</view>
			
			<view class="bottom_box">
				<view class="title" :class="type == 'decorationMoneyExchange' ? 'title2':''">
					{{type == 'decorationMoneyExchange'  ? item.goods.name :item.name  }}
				</view>
				<block v-if='type != "decorationMoneyExchange"'>
					<view class="money_box">
						<view class="left" :class="type == 'findCraftsman' ? 'left2':''">
							<view class="left_row">
								<text>¥{{item.amount_x.split('.')[0]}}.</text>
								<text>{{item.amount_x.split('.')[1] ? item.amount_x.split('.')[1] : '00'}}</text>
							</view>
							<view class="left_row" v-if='item.amount_y'>
								<text>¥{{item.amount_y.split('.')[0]}}.</text>
								<text>{{item.amount_y.split('.')[1] ? item.amount_y.split('.')[1] : '00' }}</text>
							</view>
						</view>
						<view class="right" v-if='type != "findCraftsman"'>
							月销 {{item.sale_num ? item.sale_num : 0}}
						</view>
					</view>
					<!-- 比例 -->
					<view class="bili" v-if='yunshop == 1 '>
						<view class="num">
							<text>预计可得提成</text>
							<text class="biliratio"> ￥{{item.tc_ratio ? item.tc_ratio : 0}}</text>
						</view>
						<!-- <view class="lable2" >
							<text>佣金比例</text>
							<text class="biliratio"> {{item.rebates ? item.rebates : 0}}</text>%
						</view> -->
					</view>
					<block
						v-if="type != 'decorationMoneyExchange' && type != 'marketingCampaign' && type != 'thirdPartySupervision' && type != 'newHouseAcceptance' &&  offer == 2 && getters.chat_offer_current">
						<view class="label_offer1" v-if='item.tag && item.tag.length > 0 && item.tag[0] != ""'>
							<view class="label">
								<text v-for="(label,il) in item.tag" :key='il'>{{label}}</text>
							</view>
							<view class="offer_right" v-if='$global.$chatOfferList(2,type,null,item)'
								@click.stop="$global.$chatOfferList(4,type,null,item)">
								<n-icon name="roundcheckfill" size="50" color='#007AFF'></n-icon>
							</view>
							<view class="offer_right" v-else>
								<n-icon name="round" size="50" color='#dadbde'></n-icon>
							</view>
						</view>
						<block v-else>
							<view class="label_offer2" v-if='$global.$chatOfferList(2,type,null,item)'
								@click.stop="$global.$chatOfferList(4,type,null,item)">
								<n-icon name="roundcheckfill" size="50" color='#007AFF'></n-icon>
							</view>
							<view class="label_offer2" v-else>
								<n-icon name="round" size="50" color='#dadbde'></n-icon>
							</view>
						</block>
					</block>
					<block v-else>
						<view class="label" v-if='item.tag && item.tag.length > 0 && item.tag[0] != ""'>
							<text v-for="(label,il) in item.tag" :key='il'>{{label}}</text>
						</view>
					</block>
				</block>
				<view class="money_box2" v-else>
					<view class="money">
						<view class="left_row">
							<text>¥{{item.amount_x.split('.')[0]}}.</text>
							<text>{{item.amount_x.split('.')[1] ? item.amount_x.split('.')[1] : '00'}}</text>
						</view>
						<view class="left_row" v-if='item.amount_y'>
							<text>¥{{item.amount_y.split('.')[0]}}.</text>
							<text>{{item.amount_y.split('.')[1] ? item.amount_y.split('.')[1] : '00' }}</text>
						</view>
					</view>
					<view class="label_num"
						:class="{label_num1:!item.tag || item.tag.length ==  0,label_num2:item.tag &&  item.tag.length > 0 && item.tag[0].length <= 3,label_num3: item.tag &&  item.tag.length > 0 && item.tag[0].length > 3}">
						<view class="num">
							月销 {{item.goods.sale_num ? item.goods.sale_num : 0}}
						</view>
						<view class="lable2" v-if=' item.tag &&  item.tag.length > 0 && item.tag[0] != ""'>
							<text>{{item.tag[0]}}</text>
						</view>
					</view>
					<!-- 比例 -->
					<view class="bili" v-if='yunshop == 1 '>
						<view class="num">
							<text>预计可得提成</text>
							<text class="biliratio"> ￥{{item.tc_ratio ? item.tc_ratio : 0}}</text>
						</view>
						<!-- <view class="lable2" >
							<text>佣金比例</text>
							<text class="biliratio"> {{item.rebates ? item.rebates : 0}}</text>%
						</view> -->
					</view>
					
					<block v-if="type != 'decorationMoneyExchange' && type != 'marketingCampaign' && type != 'thirdPartySupervision' && type != 'newHouseAcceptance' &&  offer == 2 && getters.chat_offer_current">
						<view class="label_offer2" v-if='$global.$chatOfferList(2,type,null,item)'
							@click.stop="$global.$chatOfferList(4,type,null,item)">
							<n-icon name="roundcheckfill" size="50" color='#007AFF'></n-icon>
						</view>
						<view class="label_offer2" v-else>
							<n-icon name="round" size="50" color='#dadbde'></n-icon>
						</view>
					</block>
				</view>

			</view>
		</view>
		
		
	</view>
	<!-- 普通店铺的装修金抵扣商品 -->
	<!-- <view class="">
		<view class="list_row" >
			<view class="list_top" @click="onShop(row)">
				<view class="list_top_left">
					<view class="image">
						<image :src="row.avatar" mode="scaleToFill" ></image>
					</view>
					<view class="info">
						<view>
							{{row.name}}
						</view>
						<view class="">
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/9xzzpO1JjprRBWoMe8im4hNqw44eyw0lYiQ4tjX2.png"  mode="" v-if="row.is_like == 1"></image>
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/2Z7ZCcSdj0pqOvT0fV0V0oFoyQrG5lWBzpZshjch.png" mode="" v-else></image>
							<text>{{row.like}}</text>
						</view>
					</view>
				</view>
				<view class="list_top_right" >
					进店
				</view>
			</view>
			<view class="list_info_box" v-if="row.goods && row.goods.length > 0">
				<scroll-view scroll-x="true">
					<view class="list_info">
						<view class="list_info_row" v-for="(row2,i2) in row.goods.slice(0,6)" :key="i2" @click="onProductDetails(row2)">
							<view class="info_image">
								<image :src="row2.cover" mode="scaleToFill"  class="info_image"></image>
							</view>
							<view class="list_info_money">
								<view class="row" v-if='row2.amount_x'>
									<text>¥{{row2.amount_x.split('.')[0]}}.</text>
									<text>{{row2.amount_x.split('.')[1] ? row2.amount_x.split('.')[1] : '00'}}</text>
								</view>
								<view class="row" v-if='row2.amount_y'>
									<text>¥{{row2.amount_y.split('.')[0]}}.</text>
									<text>{{row2.amount_y.split('.')[1] ? row2.amount_y.split('.')[1] : '00'}}</text>
								</view>
							</view>
							<view class="info_center">
								{{row2.name}}
							</view>
							<view class="info_label" v-if='row2.tag && row2.tag.length > 0'>
								<text>{{row2.tag[0].length <= 10 ? row2.tag[0] : row2.tag[0].substring(0,9) + '..'}}</text>
								<text v-if='row2.tag.length >1 && row2.tag[0].length < 4 && row2.tag[1].length < 4'>{{row2.tag[1]}}</text>
								
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	
	</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			
			status: {
				type: String,
				default: ''
			},
			type: { // findCraftsman /// caiLike(特殊待遇)
				type: String,
				default: ''
			},
			shopaid: {
				type: [String,Number],
				default: 0
			},
			source:{
				type:[String,Number],
				default:0
			},
			duihuan: {
				type: [String,Number],
				default: 0
			},
			yunshop:{
				type:[Number,String],
				default:0
			},
			size: {
				type: [String, Number],
				default: 10
			},
			page: {
				type: [String, Number],
				default: 1
			},
			offer: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				heightList: [0, 0],
				heightLists: [0, 0],
				allList: [],
				toplist: []

			}
		},
		watch: {
			list(x) {
				if (this.page == 1) {
					var length = 0
					this.allList = x
					this.heightList = [0, 0]
				} else {
					var length = this.allList.length
					this.allList = [...this.allList, ...this.list.slice(this.allList.length , this.list.length)]
				}
				console.log(this.allList,'显示列表');
				uni.showLoading()
				setTimeout(() => {
					this.getDomArea(length)
					uni.hideLoading()
				}, 1000);
			},
			
		},
		created() {
			
			this.allList = JSON.parse(JSON.stringify(this.list))
			console.log(this.allList,'兑换');
		},
		mounted() {
			this.getDomArea(0)
		},
		methods: {
			onShop(row){
				if(this.type == 'buildingMaterialsCity'){
					// 跳转到店铺
					uni.navigateTo({
						url:`/pagesCommodity/shopDetailsBuilding?id=${row.id}&name=${encodeURIComponent(row.name)}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}`
					})
				}else{
					uni.navigateTo({
						url:`/pagesCommodity/shopDetailsDefault?type=${this.type}&id=${row.id}&name=${encodeURIComponent(row.name)}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}`
					})
				}
			},
			onProductDetails(row){
				console.log(this.duihuan, '角色判断shangp');
				uni.navigateTo({
					url:`/pagesCommodity/information?id=${row.id}&type=${this.type}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}`
				})
			},
			getDomArea(i) {
				if (this.allList.length == i) return
				if (!this.allList[i].style) this.allList[i].style = {}
				let x = Math.min(...this.heightList)
				// console.log(x,'高度1');
				// console.log(this.allList[0].goods.name,'高度0');
				let y = this.heightList.indexOf(x)
				this.allList[i].style.top = x + 'rpx'
				this.allList[i].style.left = y == 0 ? '0rpx' : '348rpx'
				const query = uni.createSelectorQuery().in(this);
				query.select(`#row_${this.allList[i].id}`).boundingClientRect(data => {
					// console.log(data,'高度2');
					this.heightList[y] = x + Number((data.height * 326 / data.width).toFixed(2)) + 70
					if (i != this.allList.length - 1) {
						this.getDomArea(i + 1)
					} else {
						this.$forceUpdate()
					}
				}).exec();
				
				// console.log(this.allList,'兑换啊a');
			},
			
			onDetail(row) { 
				if (!this.$store.state.userInfo) {
					console.log(this.$store.state.userInfo,'登录');
					uni.showToast({
						title: '当前未登录，无法查看商品详情',
						duration: 2000,
						icon:'none'
					});
					return;
				}
				
				
				if (this.type == 'caiLike') {//caiLike  type 1  工长 2 设计师 3 建材成 4 云工厂 5 授权-建材城额
					if ( this.status == 'shop') {
						if(row.type == 3 || row.type == 5){
							uni.navigateTo({
								url: `/pagesCommodity/shopDetailsBuilding?id=${row.shopping_id}&type=buildingMaterialsCity&source=${this.source}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}else if(row.type == 1 || row.type == 2 || row.type == 4){
							uni.navigateTo({
								url: `/pagesCommodity/shopDetailsDefault?id=${row.shopping_id}&type=${row.type == 2 ? 'findDesign' : row.type == 1 ? 'findCraftsman' : 'cloudFactory'}&source=${this.source}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}
						
					} else {
						uni.navigateTo({
							url: `/pagesCommodity/information?id=${row.id}&type=${row.type == 1 ? 'findCraftsman' : row.type == 2 ? 'findDesign' :  row.type == 3 ? 'buildingMaterialsCity' :  row.type == 4 ? 'cloudFactory'  : 'buildingMaterialsCity'}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
						})
					}
				} else {
					if ( this.status == 'shop' && this.type != 'decorationMoneyExchange' && this.type != 'marketingCampaign') {
						if(this.type == 'buildingMaterialsCity'){
							uni.navigateTo({
								url: `/pagesCommodity/shopDetailsBuilding?id=${row.shopping_id}&type=buildingMaterialsCity&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}else{
							uni.navigateTo({
								url: `/pagesCommodity/shopDetailsDefault?id=${row.shopping_id}&type=${this.type}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}
						
					} else {
						if(row.id == 0){
							uni.navigateTo({
								url: `/pagesCommodity/information?id=${row.goods_id}&type=buildingMaterialsCity&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}else if(row.id == -1){
							uni.navigateTo({
								url: `/pagesCommodity/information?id=${row.goods_id}&type=findCraftsman&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}else{
							uni.navigateTo({
								url: `/pagesCommodity/information?id=${row.id}&type=${this.type}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
							})
						}
						
					}
				}

			}
		}
	}
</script>
<style scoped lang="scss">
	.bili{
		font-size: 12px;
		.num{
			
		}
		.lable2{
			
		}
		.biliratio{
			color: #FE0200;
			margin-left: 6px;
		}
	}
	.fenlei{
		text-align: center;
		    background: #ff8f00;
		    color: #fff;
	}
	.list_row {
		width: 100%;
		padding: 36rpx 0 30rpx 24rpx;
		box-sizing: border-box;
		// min-height: 520rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(165, 165, 165, 0.20);

		.list_top {
			padding-right: 24rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			
			.list_top_left {
				width: calc(100% - 125rpx);
				display: flex;
				justify-content: space-between;
				.image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #C8C7CC;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}

				.info {
					width: calc(100% - 104rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					>view:nth-child(1) {
						font-size: 28rpx;
						color: #26252B;
						line-height: 40rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					>view:nth-child(2) {
						display: flex;
						align-items: center;

						text {
							color: #ADADAD;
							font-size: 24rpx;
							line-height: 24rpx;
						}

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}
				}
			}

			.list_top_right {
				width: 108rpx;
				height: 48rpx;
				background: #ffffff;
				box-sizing: border-box;
				border: 1rpx solid #fe7a1f;
				border-radius: 25rpx;
				color: $theme;
				font-size: 26rpx;
				line-height: 46rpx;
				text-align: center;
			}
		}
	}

	.list_info_box {
		width: 100%;
		margin-top: 40rpx;
		height: 100%;
		.list_info {
			width: 100%;
			height: 100%;
			display: flex;
			// flex-wrap: nowrap;
		}

		.list_info_row {
			overflow: hidden;
			display: inline-flex;
			flex-direction: column;
			// align-items: center;
			min-width: 180rpx;
			margin-right: 28rpx;

			&:last-child {
				margin-right: 0;
			}

			.info_image {
				align-self: flex-start;
				background-color: #C8C7CC;
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-bottom: 16rpx;
			}

			.list_info_money {
				width: 100%;
				text-align: left;
				.row{
					display: inline-block;
				}
				>view:nth-child(1) {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #FE0200;
					>text:nth-child(2){
						font-size: 22rpx;
					}
				}

				>view:nth-child(2) {
					font-size: 22rpx;
					line-height: 44rpx;
					color: #ADADAD;
					margin-left: 16rpx;
					text-decoration: line-through;
					>text:nth-child(2){
						font-size: 20rpx;
					}
				}
				&:last-child{
					>view:nth-child(1) {
						font-size: 24rpx;
						>text:nth-child(2){
							font-size: 20rpx;
						}
					}
					>view:nth-child(2) {
						font-size: 20rpx;
					}
				}

			}

			.info_center {
				width: 180rpx;
				height:64rpx ;
				margin-top: 10rpx;
				font-size: 22rpx;
				line-height: 32rpx;
				text-align: left;
				color: #26252B;
				overflow: hidden;
				text-overflow: ellispsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.info_label {
				min-width: 180rpx;
				text-align: left;
				>text {
					display: inline-block;
					margin-top: 16rpx;
					padding: 4rpx 8rpx;
					// height: 30rpx;
					line-height: 26rpx;
					background: #ffffff;
					border: 1px solid #fe0200;
					border-radius: 8rpx;
					margin-left: 12rpx;
					font-size: 18rpx;
					color: #FE0200;

					&:first-child {
						margin-left: 0rpx;
					}
				}
			}
		}
	}
</style>


<style lang="scss" scoped>
	.list_box {
		position: relative;
		// -moz-column-count: 2;
		// -webkit-column-count: 2;
		// column-count: 2;
		// -moz-column-gap: 1em;
		// -webkit-column-gap: 1em;
		// column-gap: 1em;

		// display: flex;
		// flex-direction: column;
		// flex-wrap: wrap;
		// height: 100rpx;
		.row {
			position: absolute;
			width: 326rpx;
			background: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0px 4rpx 12rpx 0px rgba(165, 165, 165, 0.20);
			// counter-increment: item-counter;
			// margin-bottom: 20rpx;
			// &:nth-child(2n+1) {
			// 	order: 1;
			// 	margin-right: 22rpx;
			// }

			// &:nth-child(2n+2) {
			// 	order: 2
			// }
			margin-top: 1em;
			-moz-page-break-inside: avoid;
			-webkit-column-break-inside: avoid;
			break-inside: avoid;
			width: 326rpx;
			background: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0px 4rpx 12rpx 0px rgba(165, 165, 165, 0.20);

			.top_box {
				image {
					width: 326rpx;
					height: 326rpx;
				}
			}

			.bottom_box {
				background-color: #fff;
				padding: 16rpx 16rpx 26rpx;
				width: 100%;
				box-sizing: border-box;

				.title {
					color: #26252B;
					font-size: 24rpx;
					line-height: 34rpx;
					display: block;
					overflow: hidden;
					text-overflow: ellispsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.title2 {
					color: #101010;
					font-size: 24rpx;
					line-height: 34rpx;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.money_box {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;

					// align-items: center;
					.left2 {
						width: 100%;
					}

					.left {
						width: calc(100% - 4em);
						color: #FE0200;

						.left_row {
							display: inline-block;
						}

						>view:nth-child(1) {
							font-size: 28rpx;
							line-height: 44rpx;
							color: #FE0200;

							>text:nth-child(2) {
								font-size: 22rpx;
							}
						}

						>view:nth-child(2) {
							font-size: 22rpx;
							line-height: 44rpx;
							color: #ADADAD;
							margin-left: 16rpx;
							text-decoration: line-through;

							>text:nth-child(2) {
								font-size: 20rpx;
							}
						}

						&:last-child {
							>view:nth-child(1) {
								font-size: 24rpx;

								>text:nth-child(2) {
									font-size: 20rpx;
								}
							}

							>view:nth-child(2) {
								font-size: 20rpx;
							}
						}
					}

					.right {
						text-align: right;
						color: #ADADAD;
						font-size: 22rpx;
						line-height: 44rpx;
					}
				}

				.money_box2 {
					margin-top: 16rpx;

					.money {
						white-space: nowrap;
						text-overflow:ellipsis;
						overflow:hidden;
						display: block;
						
						.left_row {
							display: inline-block;
						}

						>view:nth-child(1) {
							font-size: 28rpx;
							line-height: 44rpx;
							color: #FE0200;

							>text:nth-child(2) {
								font-size: 22rpx;
							}
						}

						>view:nth-child(2) {
							font-size: 22rpx;
							line-height: 44rpx;
							color: #ADADAD;
							margin-left: 16rpx;
							text-decoration: line-through;

							>text:nth-child(2) {
								font-size: 20rpx;
							}
						}

						&:last-child {
							>view:nth-child(1) {
								font-size: 24rpx;

								>text:nth-child(2) {
									font-size: 20rpx;
								}
							}

							>view:nth-child(2) {
								font-size: 20rpx;
							}
						}
					}

					.label_num {
						.num {
							color: #ADADAD;
							font-size: 22rpx;
							line-height: 44rpx;
						}

						.lable2 {
							text {
								display: inline-block;
								padding: 2rpx 4rpx;
								line-height: 24rpx;
								border-radius: 6rpx;
								font-family: PingFang SC, PingFang SC-Regular;
								background-color: #FF0000;
								font-size: 24rpx;
								color: #ffffff;
							}
						}
					}

					.label_num2 {
						display: flex;
						justify-content: space-between;
						width: 100%;

						.num {
							width: 5em;
						}

						// .lable2{
						// 	max-width: calc(100% - 6em);
						// }
					}

					.label_num3 {
						margin-top: 16rpx;
					}
				}

				.label {
					margin-top: 16rpx;

					text {
						display: inline-block;
						padding: 3rpx 14rpx;
						border: 2rpx solid #fe0200;
						border-radius: 8rpx;
						font-size: 18rpx;
						line-height: 24rpx;
						color: #fe0200;
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.label_offer1 {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.label {
						margin-top: 0;
						width: calc(100% - 60rpx);
					}

					.offer_right {
						width: 60rpx;
						text-align: right;
					}
				}

				.label_offer2 {
					margin-top: 16rpx;
					display: flex;
					justify-content: flex-end;
				}
			}


		}
	}
</style>
